---
title: Руководство по миграции
---

# Руководство по миграции

## Миграция RainbowKit

### 2.x.x Критические изменения

Зависимости [wagmi](https://wagmi.sh) и [viem](https://viem.sh) достигли версии `2.x.x` с критическими изменениями.

Следуйте инструкциям ниже для выполнения миграции.

**Обновите RainbowKit, `wagmi`, и `viem` до последних версий**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**Установите зависимость `@tanstack/react-query`**

С Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) теперь является обязательной зависимостью.

Установите её с помощью следующей команды:

```bash
npm i @tanstack/react-query
```

**Обновите конфигурации RainbowKit и Wagmi**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**Проверьте наличие критических изменений в `wagmi` и `viem`**

Если вы используете хуки `wagmi` и действия `viem` в своём dApp, вам необходимо следовать руководствам по миграции для версии v2:

- [Руководство по миграции Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Критические изменения Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Изменения в RainbowKit

**Улучшенное поведение для кошельков EIP-6963**

Кошельки, поддерживающие новый стандарт подключения EIP-6963 (включая Rainbow, MetaMask и другие), теперь будут автоматически отображаться в разделе `Установленные` в процессе подключения кошелька. Это обеспечивает пользователям возможность всегда находить любимые кошельки и подключаться к dApps без конфликтов или кнопок возврата.

Разработчики продолжают иметь полный контроль над настраиваемым списком кошельков, чтобы подчеркнуть предпочтительные кошельки для конечных пользователей. Рекомендуем по-прежнему включать в свой список `injectedWallet` и `walletConnectWallet` для поддержки всех платформ.

**Конфигурация Wagmi с getDefaultConfig**

Этот новый API упрощает процесс настройки конфигурации и заменяет необходимость в прямом использовании `createConfig` Wagmi. Конфигурация цепочки упрощена, включая предполагаемых публичных провайдеров для `transports`.

Список кошельков по умолчанию будет автоматически включен, что исключает необходимость использования `getDefaultWallets` и `connectorsForWallets`.

Вы можете создать Пользовательский список кошельков, передав импортированные или Пользовательские коннекторы кошельков в `wallets`. Больше не требуется создавать экземпляры кошельков и передавать `projectId` и `chains`.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**RainbowKitProvider**

Больше не нужно передавать `chains` в `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**Пользовательские сети**

Тип `Chain` изменился в соответствии с Wagmi v2 и продолжает поддерживать метаданные RainbowKit `iconUrl` и `iconBackground`.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Пример с `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

Пример с `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**Пользовательские кошельки**

Коннекторы кошелька RainbowKit подверглись значительным изменениям для поддержки Wagmi v2. Ссылка на [обновленную документацию](https://www.rainbowkit.com/docs/custom-wallets) и [пример коннектора](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) для обновления любых Пользовательских Коннекторов Кошельков в вашем dApp.

Коннекторы кошельков теперь также поддерживают стандарт EIP-6963 с параметром `rdns`. Убедитесь, что это поле заполнено, чтобы избежать дублирования ссылок на кошельки, поддерживающие EIP-6963 в вашем списке кошельков.

### 1.x.x Критические изменения

#### Обновлено до wagmi v1

[wagmi](https://wagmi.sh) зависимость уровня peer обновлена до `1.x.x`.

Следуйте инструкциям ниже для выполнения миграции.

**Обновите RainbowKit и `wagmi` до их последней версии**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**Установите зависимость `viem` второго уровня**

Для работы wagmi v1 требуется зависимость `viem`. Установите его с помощью следующей команды:

```bash
npm i viem
```

**Обеспечьте совместимость пакетировщика и полифиллов**

Ссылка на наш [Конфигурация Webpack Next.js](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js) образцы для руководства по настройке вашего проекта.

Дополнительные руководства по фреймворку для Vite и Remix доступны [здесь](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup).

**Проверьте наличие обратно несовместимых изменений в `wagmi`**

Если вы используете хуки `wagmi` в вашем приложении, вам нужно будет следовать руководству по миграции `wagmi` к v1.

[Вы можете посмотреть их руководство по миграции здесь](https://wagmi.sh/react/migration-guide).

### 0.12.x Критические изменения

Версия wagmi для одноранговых зависимостей была обновлена до `0.12.x`.

RainbowKit принял коннектор `WalletConnectLegacyConnector` в `wagmi` для поддержки WalletConnect v1. Поддержка WalletConnect v2 и `WalletConnectConnector` будет доступна в качестве патча без критических изменений.

Кошельки будут автоматически переведены на последующие релизы.

Каждое dApp должно теперь предоставить `projectId` от [WalletConnect Cloud](https://cloud.walletconnect.com/) для активации WalletConnect v2. Это должно быть завершено до выключения серверов моста WalletConnect v1 28 июня 2023 года. RainbowKit будет тихо предпочтительнее v1 для всех кошельков, если `projectId` не указан.

Следуйте инструкциям ниже для выполнения миграции.

#### Обновите RainbowKit и `wagmi` до последней версии

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### Предоставьте projectId от WalletConnect Cloud

Теперь каждому dApp, который зависит от WalletConnect, необходимо получить `projectId` от [WalletConnect Cloud](https://cloud.walletconnect.com/). Это абсолютно бесплатно и занимает всего несколько минут.

Предоставьте `projectId` для `getDefaultWallets` и индивидуальных соединителей кошелька RainbowKit следующим образом:

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### 0.11.x Критические изменения

Зависимость wagmi была обновлена до `0.11.x`.

Следуйте инструкциям ниже для выполнения миграции.

#### Обновите RainbowKit и `wagmi` до последней версии

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### Проверьте наличие критических изменений в `wagmi`

Если вы используете хуки `wagmi` в своем приложении, вам потребуется проверить, затронули ли критические изменения в `wagmi` ваше приложение.

[Здесь вы можете увидеть их руководство по миграции](https://wagmi.sh/react/migration-guide#011x-breaking-changes).

### 0.10.x Критические изменения

Зависимость wagmi была обновлена до `0.10.x`.

Следуйте инструкциям ниже для выполнения миграции.

#### Обновите RainbowKit и `wagmi` до последней версии

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### Проверьте наличие критических изменений в `wagmi`

Если вы используете хуки `wagmi` в своем приложении, вам потребуется проверить, затронули ли критические изменения в `wagmi` ваше приложение.

[Здесь вы можете увидеть их руководство по миграции](https://wagmi.sh/react/migration-guide#010x-breaking-changes).

### 0.9.x Критические изменения

Зависимость wagmi была обновлена до `0.9.x`.

Следуйте инструкциям ниже для выполнения миграции.

#### Обновите RainbowKit и `wagmi` до последней версии

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### Проверьте наличие критических изменений в `wagmi`

Если вы используете хуки `wagmi` в своем приложении, вам потребуется проверить, затронули ли критические изменения в `wagmi` ваше приложение.

[Здесь вы можете увидеть их руководство по миграции](https://wagmi.sh/react/migration-guide#09x-breaking-changes).

### 0.8.x Критические изменения

Версия wagmi для одноранговых зависимостей была обновлена до `0.8.x`.

Следуйте инструкциям ниже для выполнения миграции.

#### Обновите RainbowKit и `wagmi` до последней версии

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### Проверьте наличие критических изменений в `wagmi`

Если вы используете хуки `wagmi` в своем приложении, вам потребуется проверить, затронули ли критические изменения в `wagmi` ваше приложение.

[Здесь вы можете увидеть их руководство по миграции](https://wagmi.sh/react/migration-guide#08x-breaking-changes).

### 0.7.x Критические изменения

Если вы создаете настраиваемый список кошельков, теперь необходимо импортировать каждый кошелек по отдельности, чтобы уменьшить размер пакета. Обратите внимание, что так как кошельки больше не имеют пространства имен через объект `wallet`, все кошельки теперь имеют суффикс `Wallet`.

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

Также обратите внимание, что слой обратной совместимости Steakwallet был удален. Omni следует использовать вместо него.

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### 0.4.x Критические изменения

RainbowKit обновил зависимость уровня `wagmi` до `0.5.x`.

Следуйте инструкциям ниже для выполнения миграции.

#### Обновить зависимости

Обновите RainbowKit и wagmi до их последней версии

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### Проверьте наличие критических изменений в `wagmi`

Если вы используете хуки `wagmi` в своем приложении, вам потребуется проверить, затронули ли критические изменения в `wagmi` ваше приложение.

[Вы можете посмотреть их руководство по миграции здесь](https://wagmi.sh/react/migration-guide#05x-breaking-changes).

### 0.3.x Критические изменения

Удален параметр `chainId` из `createConnector` в типе `Wallet`.

**Обратите внимание, что все встроенные кошельки используют новый API. Большинство пользователей не будут затронуты. Эти изменения касаются только пользователей, которые создавали/использовали [пользовательские кошельки](/docs/custom-wallets).**

Если вы ранее получали URL-ы RPC из `chainId` на `createConnector`, теперь вы можете удалить эту логику, поскольку `wagmi` теперь обрабатывает URL-ы RPC внутренне при использовании с `configureChains`.

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### 0.2.x Критические изменения

RainbowKit обновил пир-зависимость `wagmi` до `^0.4`.

Следуйте инструкциям ниже для выполнения миграции.

#### Обновить зависимости

Обновите RainbowKit и wagmi до их последней версии

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### Замените импорт configureChains

Импорт `configureChains` из wagmi вместо RainbowKit:

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### Миграция провайдеров

RainbowKit больше не экспортирует API `apiProvider`. Замените его на предпочитаемого провайдера из wagmi.

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Алхимия

Импортируйте `alchemyProvider` из `wagmi/providers/alchemy`.

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Инфура

Импортируйте `infuraProvider` из `wagmi/providers/infura`.

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

Импортируйте `jsonRpcProvider` из `wagmi/providers/jsonRpc`.

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### Общедоступный провайдер

Импортируйте `publicProvider` из `wagmi/providers/public`.

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### Переименуйте провайдер wagmi

Переименуйте `WagmiProvider` в `WagmiConfig`.

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

И вы справились! 🌈
